<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<div class="layui-header">
    <!--顶部导航条-->
    <div class="layui-logo layui-hide-xs"
         style="width:500px;"><img src="${ctx}/static/images/sys_logo.png"></div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->

    <ul class="layui-nav" style="text-align: center">
        <p id="clock" style="color: #ffffff;line-height: 60px;">
            <span id="date"></span>
            <span id="time"></span>&nbsp;
            <span id="week"></span>
        </p>
    </ul>

    <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item layui-hide layui-show-md-inline-block">
            <a href="javascript:;">
                <c:choose>
                    <c:when test="${sessionScope.student.name==null}">
                        <a href="${ctx}/login.jsp">未登录</a>
                    </c:when>
                    <c:when test="${sessionScope.student.name!=null}">
                        <img src="${ctx}/static/images/student.png" class="layui-nav-img">
                        <span>${sessionScope.student.name}</span>
                    </c:when>
                </c:choose>
            </a>
            <c:if test="${sessionScope.student.name!=null}">
                <dl class="layui-nav-child">
                    <dd><a class="layui-icon layui-icon-username" id="personInfo"
                           style="font-size: 16px; cursor: pointer;">&nbsp;个人信息</a></dd>
                    <dd><a class="layui-icon layui-icon-set" id="editPassword" style="font-size: 16px; cursor: pointer;">&nbsp;修改密码</a>
                    </dd>
                    <dd><a class="layui-icon layui-icon-logout" href="${ctx}/logout.action" style="font-size: 16px;">&nbsp;注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</a>
                    </dd>
                </dl>
            </c:if>
        </li>
        <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
            <a href="javascript:;">
                <i class="layui-icon layui-icon-more-vertical"></i>
            </a>
        </li>
    </ul>
</div>
<%--弹出层--%>
<form class="layui-form" id="edit_form" style="display:none; margin-top: 16px">
    <div class="layui-form-item">
        <label class="layui-form-label mylabel">学号</label>
        <div class="layui-input-block">
            <input type="text" name="stuNo" id="stuNo" readonly="readonly"
                   class="layui-input layui-disabled" style="width: 350px;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label mylabel">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" id="name" class="layui-input" style="width: 350px;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label mylabel">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" id="b" checked value="男" title="男">
            <input type="radio" name="sex" id="g" value="女" title="女">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label mylabel">年龄</label>
            <div class="layui-input-block">
                <input type="text" name="age" id="age" class="layui-input"
                       style="width: 80px;">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label mylabel">毕业年份</label>
            <div class="layui-input-block">
                <input type="text" name="grade" id="grade" readonly="readonly" class="layui-input layui-disabled"
                       style="width: 145px;">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label mylabel">所属系</label>
            <div class="layui-input-block">
                <input type="text" name="department" id="department" readonly="readonly" value="计算机系"
                       class="layui-input layui-disabled"
                       style="width: 80px;">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label mylabel">专业</label>
            <div class="layui-input-block">
                <input type="text" name="major" id="major" readonly="readonly"
                       class="layui-input layui-disabled"
                       style="width: 145px;">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label mylabel">电话</label>
            <div class="layui-input-block">
                <input type="text" name="phone" id="phone" class="layui-input"
                       style="width: 350px;">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label mylabel">电子邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" id="email" class="layui-input" style="width: 350px;">
            </div>
        </div>
    </div>
    <div style="float: right;margin-right: 40px">
        <div class="layui-input-block">
            <button type="button" id="btn" class="layui-btn layui-btn-normal">修改</button>
            <button type="button" id="btnClose" class="layui-btn layui-btn-primary">关闭</button>
        </div>
    </div>
</form>

<form class="layui-form" id="password_form" style="display:none; margin-top: 16px">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label mylabel">新密码</label>
            <div class="layui-input-block">
                <input type="text" name="password" id="password" class="layui-input" style="width: 200px;">
            </div>
        </div>
    </div>
    <div style="float: right;margin-right: 40px">
        <div class="layui-input-block">
            <button type="button" id="btn1" class="layui-btn layui-btn-normal">确认</button>
            <button type="button" id="btnClose1" class="layui-btn layui-btn-primary">关闭</button>
        </div>
    </div>
</form>

<script src="${ctx}/static/js/jquery.min.js"></script>
<script src="${ctx}/static/layui/layui.js" charset="utf-8"></script>
<script src="${ctx}/static/js/index.js"></script>
<script>

    window.onload = function setTime() {
        getTime();
        setInterval(() => {
            getTime();
        }, 1000);
    }

    function getTime() {
        let weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];

        let dt = new Date();
        let date = dt.getFullYear() + "年" + (dt.getMonth() + 1) + "月" + dt.getDate() + "日";
        document.getElementById("date").innerHTML = date;

        let hours = dt.getHours();
        if (hours < 10) {
            hours = "0" + hours;
        }
        let minutes = dt.getMinutes();
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        let second = dt.getSeconds();
        if (second < 10) {
            second = "0" + second;
        }
        let time = hours + ":" + minutes + ":" + second;
        document.getElementById("time").innerHTML = time;

        let week = weeks[dt.getDay()];
        document.getElementById("week").innerHTML = week;
    }

    layui.use(['layer', 'jquery', 'form'], function () {
        let layer = layui.layer,
            $ = layui.$,
            form = layui.form;

        $("#personInfo").on("click", function () {
            layer.open({
                type: 1,
                area: ['500px', '520px'],
                title: '个人信息',
                content: $("#edit_form"),
                shade: 0,
                cancel: function (index) {
                    layer.closeAll();
                }
            });
            $.ajax({
                url: "${ctx}/student/getPersonInfo.action",
                type: "post",
                success: function (data) {
                    let student = data.student;
                    $("#stuNo").val(student.stuNo);
                    $("#name").val(student.name);
                    $("#age").val(student.age);
                    if (student.sex != "男") {
                        $("#b").removeAttr("checked");
                        $("#g").attr("checked", true);
                    } else {
                        $("#g").removeAttr("checked");
                        $("#b").attr("checked", true);
                    }
                    $("#department").val(student.department);
                    $("#grade").val(student.grade);
                    $("#major").val(student.major);
                    $("#email").val(student.email);
                    $("#phone").val(student.phone);
                    form.render();
                }
            });
        });

        $("#btn").on("click", function () {
            if ($("#stuNo").val() == "") {
                layer.msg("学号不允许为空");
                return;
            } else if (!/^\d{10}$/.test($("#stuNo").val())) {
                layer.msg("学号格式不正确");
                return;
            } else if ($("#name").val() == "") {
                layer.msg("姓名不允许为空");
                return;
            } else if (!/^[\u4e00-\u9fa5]{2,6}$/.test($("#name").val())) {
                layer.msg("只能输入中文名字");
                return;
            } else if ($("#phone").val() == "") {
                layer.msg("电话号码不允许为空");
                return;
            } else if (!/^1[3|4|5|7|8][0-9]{9}$/.test($("#phone").val())) {
                layer.msg("电话号码格式不正确");
                return;
            } else if ($("#email").val() != "") {
                if (!/^[A-Za-zd0-9]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/.test($("#email").val())) {
                    layer.msg("邮箱格式不正确");
                    return;
                }
                layer.confirm("确定要提交吗？", {btn: ['确定', '取消'], title: "提示"}, function () {
                    $.ajax({
                        type: "post",
                        url: "${ctx}/student/updatePerson.action",
                        data: $("#edit_form").serialize(),
                        dataType: "json",
                        contentType: "application/x-www-form-urlencoded",
                        success: function (data) {
                            console.log(data);
                            if (data.flag) {
                                layer.msg("修改成功");
                                setTimeout(() => {
                                    window.location.reload();
                                }, 1500);
                            } else {
                                layer.msg("修改失败");
                            }
                        },
                        error: function () {
                            layer.msg("请求失败");
                        }
                    });
                    layer.closeAll('dialog');
                });
            }
        });

        $("#editPassword").on("click",function () {
            layer.open({
                type: 1,
                area: ['350px', '180px'],
                title: '修改密码',
                content: $("#password_form"),
                shade: 0,
                cancel: function (index) {
                    layer.closeAll();
                }
            });
        });

        $("#btn1").on("click", function () {
            if ($("#password").val()=="") {
                layer.msg("密码不能为空");
                return;
            } else {
                layer.confirm("确定要修改吗？", {btn: ['确定', '取消'], title: "提示"}, function () {
                    $.ajax({
                        type: "post",
                        url: "${ctx}/updatePassword.action",
                        data: {password: $("#password").val()},
                        dataType: "json",
                        contentType: "application/x-www-form-urlencoded",
                        success: function (data) {
                            if (data.flag) {
                                layer.msg("修改成功");
                                setTimeout(() => {
                                    window.location.reload();
                                }, 1500);
                            } else {
                                layer.msg("修改失败");
                            }
                        },
                        error: function () {
                            layer.msg("请求失败");
                        }
                    });
                    layer.closeAll('dialog');
                });
            }
        });

        $("#btnClose").on("click", function (index) {
            layer.closeAll();
        });
        $("#btnClose1").on("click", function (index) {
            layer.closeAll();
        });
    });
</script>